<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <TodoHeader :addTodo="addTodo" />
      <TodoMain :todos="todos" :updataTodo="updataTodo" :deleteTodo="deleteTodo" />
      <TodoFooter :todos="todos" :updataAllTodo="updataAllTodo" :deleteAllDone="deleteAllDone" />
      <MyC v-on:erha="handle" />
      <h2>{{str | big}}</h2>
      <h2>{{str | hehe}}</h2>
      <h2 v-haha="str"></h2>
    </div>
  </div>
</template>
    
<script>
import TodoHeader from "@/components/TodoHeader";
import TodoMain from "@/components/TodoMain";
import TodoFooter from "@/components/TodoFooter";
import MyC from '@/components/MyC';
export default {
  data() {
    return {
      todos:JSON.parse(localStorage.getItem('TODO')) || [],
      str:'abcdefg'
      
      // todos: [
      //   { id: 1, title: "吃饭", done: false },
      //   { id: 2, title: "睡觉", done: false },
      //   { id: 3, title: "玩耍", done: false },
      // ],
    };
  },
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
    MyC
  },
  methods: {
    handle(a){
      console.log(a);
    }
    ,
    updataTodo(id,done){
      // console.log(id,done);
      this.todos = this.todos.map(todo=>todo.id === id ? {...todo,done} :todo)
    },
    deleteTodo(id){
      if(!confirm('你确定要删除吗?')) return;
      this.todos = this.todos.filter(item=>item.id !== id);
    },
    addTodo(todoObj){
      // this.todos.push(todoObj);
      let exist =  this.todos.some(item=>item.title === todoObj.title);
      if(exist) return alert('您添加的事件已经存在');
      this.todos.push(todoObj);
    },
    updataAllTodo(done){
      // console.log(done);
      this.todos.forEach(item=>item.done=done)
    },
    deleteAllDone(){
      if(!confirm('你确定要删除吗?')) return;
      this.todos = this.todos.filter(item=>!item.done)
    }
  },
  watch: {
    todos:{
      deep:true,
      handler(){
           console.log('VM响应式属性值发生变化');
           localStorage.setItem('TODO',JSON.stringify(this.todos));
       }
    }
  },
  mounted () {
    // console.log(Boolean([]));
  }
};
</script>

<style lang="">
</style>



